<template>
    <div class="common-nav">
        <ul>         
            <router-link class="common-nav-item" :to="item.navLink" tag="li" v-for="(item,index) of navList" :key="index">
                <span class="iconfont" v-html="item.navIco"></span>
                <span class="nav-title">{{item.navTitle}}</span>
            </router-link>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'commonNav',
    data() {
        return {
            navList: [
                {
                    'navIco': '&#xe615;',
                    'navTitle': '首页',
                    'navLink': '/'
                },
                {
                    'navIco': '&#xe609;',
                    'navTitle': '分类',
                    'navLink': '/category'
                },
                {
                    'navIco': '&#xe628;',
                    'navTitle': '购物车',
                    'navLink': '/cart'
                },
                {
                    'navIco': '&#xe605;',
                    'navTitle': '我的',
                    'navLink': '/my'
                }
            ]
        }
    }
}
	
</script>

<style lang="less" scoped>
.common-nav{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    // height: 1rem;
    background-color: #ffffff;
    z-index: 9;
    ul{
        overflow: hidden;
        display: flex;
        width: 100%;
    }
    .common-nav-item{
        flex: 1;
        height: 1.1rem;
        padding: .2rem 0;
        text-align: center;
        &.active{
            color: #f23030;
        }
    }
    .iconfont{
        display: block;
        height: .4rem;
        font-size: .4rem;
    }
    .nav-title{
        display: block;
        height: .3rem;
        margin-top: .06rem;
        font-size: .24rem;
    }
}
	
</style>